<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- van-popup
        v-model="是否显示"
        position:显示的位置   
        -->
      <!-- van-picker:选择器
           title="中间标题"
           show-toolbar:是否显示工具栏
           :columns="[数组]"
           default-index="索引值"
           @confirm="点击了确定"
           @cancel="点击了取消"
        -->
      <!-- 需求:弹出性别 选择
        0:未知 1:男  2:女
        -->
      <van-button @click="isShow=true">点击显示弹框</van-button>
      <van-popup v-model="isShow" position="bottom">
        <!-- 对象转数组
            Object.keys(对象)===['0','1','2']
            Object.values(对象)===['未知','男','女']        
        -->
        <van-picker
          title="性别选择"
          show-toolbar
          :columns="Object.values(sexObj)"
          :default-index="defaultIndex"
          @cancel="isShow=false"
          @confirm="confirmClick"
        ></van-picker>
      </van-popup>
    </div>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css"
    />

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          isShow: false,
          sexObj: {
            0: '未知',
            1: '男',
            2: '女'
          },
          defaultIndex: 1
        },
        methods: {
          confirmClick (value, index) {
            this.defaultIndex = index
            this.isShow = false
            window.console.log(value, index)
          }
        }
      })
    </script>
  </body>
</html>
